<fieldset class="layui-elem-field layui-field-title">
	<legend>用户列表</legend>
</fieldset>


<form class="layui-form">
	<div class="layui-inline">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请输入用户姓名"
				class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input type="text" name="idcard" placeholder="请输入用户身份证号"
				class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" placeholder="请输入用户电话"
				class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<div class="layui-input-inline">
			<button class="layui-btn" lay-submit lay-filter="user-search">
				<i class="layui-icon layui-icon-search"></i>
			</button>
		</div>
	</div>
</form>

<table id="user-list" lay-filter="user-list">


</table>

<script type="text/html" id="user-bar">


 {{# if(d.status==0){ }}
 <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="disable">禁用</a>
  {{#  } else{ }} 
 <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="enable">启用</a>
 {{# } }}
 <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
</script>

<script>
	layui.use([ 'table', 'form' ], function() {
		var table = layui.table, form = layui.form;
		table.render({
			elem : '#user-list',
			url : '/api/user/search',
			page : true,
			cols : [ [ {
				title : 'ID',
				field : 'id'
			}, {
				title : '姓名',
				field : 'name'
			}, {
				title : '身份证号',
				field : 'idcard'
			}, {
				title : '电话',
				field : 'phone'
			}, {
				title : '状态',
				field : 'status',
				templet : function(d) {
					return [ '正常', '异常' ][d.status];
				}
			}, {
				title : '操作',
				toolbar : '#user-bar'
			}, ] ],
			parseData : function(res) {
				return {
					code : res.code,
					msg : res.msg,
					count : res.data.total,
					data : res.data.list,
				};
			},
		});
		form.on('submit(user-search)', function(data) {
			table.reload('user-list', {
				where : data.field,
				page : {
					cur : 1
				},
			});
			return false;
		});
		table.on('tool(user-list)', function(obj) {
			if (obj.event == 'disable') {
				layer.confirm('确定要禁用吗？', function(index) {
					layer.close(index);
					$.ajax({
						url : '/api/user/edit',
						data : {
							id : obj.data.id,
							status : 1
						},
						type : 'post',
						dataType : 'json',
						success : function(result) {
							if (result.code > 0) {
								layer.msg('禁用成功');
								table.reload('user-list');
							} else {
								layer.msg(result.msg);
							}
						},
						error : function() {
							layer.msg('请求失败');
						}
					});
				});
			} else if (obj.event == 'enable') {
				layer.confirm('确定要启用吗？', function(index) {
					layer.close(index);
					$.ajax({
						url : '/api/user/edit',
						data : {
							id : obj.data.id,
							status : 0
						},
						type : 'post',
						dataType : 'json',
						success : function(result) {
							if (result.code > 0) {
								layer.msg('启用成功');
								table.reload('user-list');
							} else {
								layer.msg(result.msg);
							}
						},
						error : function() {
							layer.msg('请求失败');
						}
					});
				});
			} else if (obj.event == 'edit') {
				sessionStorage.setItem('user',JSON.stringify(obj.data));
				layer.open({
					type: 2,
					title: '编辑用户',
					content: '/user/edit.html',
					end: function(){
						table.reload('user-list');
					},
					area: ['500px','400px'],
				});

				
			}
		});

	});
</script>